import React, { PureComponent } from 'react';
import { Row, Col, Card, List, Avatar, Tag, Icon } from 'antd';
import { connect } from 'dva';
import numeral from 'numeral';
import Link from 'umi/link';
import GridContent from '@/components/PageHeaderWrapper/GridContent'

import { ChartCard, MiniArea, MiniBar, MiniProgress } from '@/components/Charts';

import EchartCurveRT from '../dashboard/echartCurvert';

import ForeCast from '../forecast/chart'
import DeviceCard from './component/deviceCard'
import DeviceCardBeng from './component/deviceCardBeng'
import DeviceCardTa from './component/deviceCardTa'

import DeviceIndexCard from './component/device_index';
import DeviceTimeSeries from './component/device_timeseries';
import DeciceMiniChart  from './component/device_minichart'

import zhileng from '@/assets/avatar/zhileng-.png'
import gfypt from '@/assets/avatar/gfypt.png'
import nuanqi from '@/assets/avatar/nuanqi.png'
import jienenghuanbao from '@/assets/avatar/jienenghuanbao.png'
import eryanghuatannongdu from '@/assets/avatar/eryanghuatannongdu.png'
import profit from '@/assets/avatar/ai-profit.png'
import zhiranji from '@/assets/1094.jpg'
import lenqueta from '@/assets/th.jpeg'
import shuibeng from '@/assets/th1.jpeg'
import yanqiji from '@/assets/th3.jpeg'
import fadianji from '@/assets/th2.jpeg'
import kongqiyuanreb from '@/assets/th4.jpeg'

// eslint-disable-next-line react/prefer-stateless-function
class ProjectMonitor extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      pd: [],

    }
  }


  render() {
    const { pd } = this.state;
    const chartData = { "visitData": [{ "x": "2019-04-11", "y": 7 }, { "x": "2019-04-12", "y": 5 }, { "x": "2019-04-13", "y": 4 }, { "x": "2019-04-14", "y": 2 }, { "x": "2019-04-15", "y": 4 }, { "x": "2019-04-16", "y": 7 }, { "x": "2019-04-17", "y": 5 }, { "x": "2019-04-18", "y": 6 }, { "x": "2019-04-19", "y": 5 }, { "x": "2019-04-20", "y": 9 }, { "x": "2019-04-21", "y": 6 }, { "x": "2019-04-22", "y": 3 }, { "x": "2019-04-23", "y": 1 }, { "x": "2019-04-24", "y": 5 }, { "x": "2019-04-25", "y": 3 }, { "x": "2019-04-26", "y": 6 }, { "x": "2019-04-27", "y": 5 }], "visitData2": [{ "x": "2019-04-11", "y": 1 }, { "x": "2019-04-12", "y": 6 }, { "x": "2019-04-13", "y": 4 }, { "x": "2019-04-14", "y": 8 }, { "x": "2019-04-15", "y": 3 }, { "x": "2019-04-16", "y": 7 }, { "x": "2019-04-17", "y": 2 }], "salesData": [{ "x": "1月", "y": 340 }, { "x": "2月", "y": 673 }, { "x": "3月", "y": 567 }, { "x": "4月", "y": 841 }, { "x": "5月", "y": 358 }, { "x": "6月", "y": 438 }, { "x": "7月", "y": 292 }, { "x": "8月", "y": 1185 }, { "x": "9月", "y": 1033 }, { "x": "10月", "y": 726 }, { "x": "11月", "y": 839 }, { "x": "12月", "y": 574 }], "searchData": [{ "index": 1, "keyword": "搜索关键词-0", "count": 496, "range": 27, "status": 0 }, { "index": 2, "keyword": "搜索关键词-1", "count": 544, "range": 6, "status": 1 }, { "index": 3, "keyword": "搜索关键词-2", "count": 36, "range": 30, "status": 0 }, { "index": 4, "keyword": "搜索关键词-3", "count": 979, "range": 31, "status": 0 }, { "index": 5, "keyword": "搜索关键词-4", "count": 908, "range": 50, "status": 1 }, { "index": 6, "keyword": "搜索关键词-5", "count": 861, "range": 80, "status": 0 }, { "index": 7, "keyword": "搜索关键词-6", "count": 560, "range": 46, "status": 1 }, { "index": 8, "keyword": "搜索关键词-7", "count": 588, "range": 82, "status": 1 }, { "index": 9, "keyword": "搜索关键词-8", "count": 233, "range": 76, "status": 0 }, { "index": 10, "keyword": "搜索关键词-9", "count": 271, "range": 58, "status": 1 }, { "index": 11, "keyword": "搜索关键词-10", "count": 13, "range": 47, "status": 0 }, { "index": 12, "keyword": "搜索关键词-11", "count": 152, "range": 28, "status": 0 }, { "index": 13, "keyword": "搜索关键词-12", "count": 48, "range": 70, "status": 1 }, { "index": 14, "keyword": "搜索关键词-13", "count": 97, "range": 40, "status": 1 }, { "index": 15, "keyword": "搜索关键词-14", "count": 575, "range": 26, "status": 0 }, { "index": 16, "keyword": "搜索关键词-15", "count": 594, "range": 93, "status": 1 }, { "index": 17, "keyword": "搜索关键词-16", "count": 732, "range": 53, "status": 0 }, { "index": 18, "keyword": "搜索关键词-17", "count": 862, "range": 99, "status": 0 }, { "index": 19, "keyword": "搜索关键词-18", "count": 799, "range": 17, "status": 1 }, { "index": 20, "keyword": "搜索关键词-19", "count": 523, "range": 80, "status": 0 }, { "index": 21, "keyword": "搜索关键词-20", "count": 163, "range": 79, "status": 0 }, { "index": 22, "keyword": "搜索关键词-21", "count": 570, "range": 43, "status": 1 }, { "index": 23, "keyword": "搜索关键词-22", "count": 20, "range": 72, "status": 1 }, { "index": 24, "keyword": "搜索关键词-23", "count": 745, "range": 99, "status": 1 }, { "index": 25, "keyword": "搜索关键词-24", "count": 725, "range": 54, "status": 1 }, { "index": 26, "keyword": "搜索关键词-25", "count": 329, "range": 41, "status": 1 }, { "index": 27, "keyword": "搜索关键词-26", "count": 401, "range": 10, "status": 0 }, { "index": 28, "keyword": "搜索关键词-27", "count": 175, "range": 56, "status": 0 }, { "index": 29, "keyword": "搜索关键词-28", "count": 553, "range": 38, "status": 0 }, { "index": 30, "keyword": "搜索关键词-29", "count": 914, "range": 93, "status": 0 }, { "index": 31, "keyword": "搜索关键词-30", "count": 875, "range": 0, "status": 1 }, { "index": 32, "keyword": "搜索关键词-31", "count": 963, "range": 9, "status": 1 }, { "index": 33, "keyword": "搜索关键词-32", "count": 192, "range": 1, "status": 0 }, { "index": 34, "keyword": "搜索关键词-33", "count": 738, "range": 29, "status": 1 }, { "index": 35, "keyword": "搜索关键词-34", "count": 45, "range": 87, "status": 0 }, { "index": 36, "keyword": "搜索关键词-35", "count": 34, "range": 64, "status": 0 }, { "index": 37, "keyword": "搜索关键词-36", "count": 362, "range": 95, "status": 1 }, { "index": 38, "keyword": "搜索关键词-37", "count": 546, "range": 51, "status": 0 }, { "index": 39, "keyword": "搜索关键词-38", "count": 198, "range": 31, "status": 1 }, { "index": 40, "keyword": "搜索关键词-39", "count": 157, "range": 28, "status": 1 }, { "index": 41, "keyword": "搜索关键词-40", "count": 442, "range": 58, "status": 0 }, { "index": 42, "keyword": "搜索关键词-41", "count": 107, "range": 16, "status": 1 }, { "index": 43, "keyword": "搜索关键词-42", "count": 628, "range": 9, "status": 1 }, { "index": 44, "keyword": "搜索关键词-43", "count": 652, "range": 58, "status": 1 }, { "index": 45, "keyword": "搜索关键词-44", "count": 256, "range": 13, "status": 0 }, { "index": 46, "keyword": "搜索关键词-45", "count": 241, "range": 98, "status": 1 }, { "index": 47, "keyword": "搜索关键词-46", "count": 653, "range": 60, "status": 0 }, { "index": 48, "keyword": "搜索关键词-47", "count": 921, "range": 88, "status": 0 }, { "index": 49, "keyword": "搜索关键词-48", "count": 873, "range": 18, "status": 0 }, { "index": 50, "keyword": "搜索关键词-49", "count": 60, "range": 86, "status": 0 }], "offlineData": [{ "name": "Stores 0", "cvr": 0.7 }, { "name": "Stores 1", "cvr": 0.2 }, { "name": "Stores 2", "cvr": 0.6 }, { "name": "Stores 3", "cvr": 0.9 }, { "name": "Stores 4", "cvr": 0.7 }, { "name": "Stores 5", "cvr": 0.6 }, { "name": "Stores 6", "cvr": 0.7 }, { "name": "Stores 7", "cvr": 0.4 }, { "name": "Stores 8", "cvr": 0.2 }, { "name": "Stores 9", "cvr": 0.7 }], "offlineChartData": [{ "x": 1554943266323, "y1": 36, "y2": 74 }, { "x": 1554945066323, "y1": 80, "y2": 32 }, { "x": 1554946866323, "y1": 70, "y2": 12 }, { "x": 1554948666323, "y1": 69, "y2": 88 }, { "x": 1554950466323, "y1": 44, "y2": 66 }, { "x": 1554952266323, "y1": 55, "y2": 89 }, { "x": 1554954066323, "y1": 41, "y2": 64 }, { "x": 1554955866323, "y1": 69, "y2": 12 }, { "x": 1554957666323, "y1": 47, "y2": 94 }, { "x": 1554959466323, "y1": 106, "y2": 98 }, { "x": 1554961266323, "y1": 86, "y2": 79 }, { "x": 1554963066323, "y1": 78, "y2": 71 }, { "x": 1554964866323, "y1": 84, "y2": 81 }, { "x": 1554966666323, "y1": 81, "y2": 50 }, { "x": 1554968466323, "y1": 74, "y2": 100 }, { "x": 1554970266323, "y1": 50, "y2": 73 }, { "x": 1554972066323, "y1": 56, "y2": 87 }, { "x": 1554973866323, "y1": 67, "y2": 59 }, { "x": 1554975666323, "y1": 52, "y2": 28 }, { "x": 1554977466323, "y1": 85, "y2": 16 }], "salesTypeData": [{ "x": "家用电器", "y": 4544 }, { "x": "食用酒水", "y": 3321 }, { "x": "个护健康", "y": 3113 }, { "x": "服饰箱包", "y": 2341 }, { "x": "母婴产品", "y": 1231 }, { "x": "其他", "y": 1231 }], "salesTypeDataOnline": [{ "x": "家用电器", "y": 244 }, { "x": "食用酒水", "y": 321 }, { "x": "个护健康", "y": 311 }, { "x": "服饰箱包", "y": 41 }, { "x": "母婴产品", "y": 121 }, { "x": "其他", "y": 111 }], "salesTypeDataOffline": [{ "x": "家用电器", "y": 99 }, { "x": "食用酒水", "y": 188 }, { "x": "个护健康", "y": 344 }, { "x": "服饰箱包", "y": 255 }, { "x": "其他", "y": 65 }], "radarData": [{ "name": "个人", "label": "引用", "value": 10 }, { "name": "个人", "label": "口碑", "value": 8 }, { "name": "个人", "label": "产量", "value": 4 }, { "name": "个人", "label": "贡献", "value": 5 }, { "name": "个人", "label": "热度", "value": 7 }, { "name": "团队", "label": "引用", "value": 3 }, { "name": "团队", "label": "口碑", "value": 9 }, { "name": "团队", "label": "产量", "value": 6 }, { "name": "团队", "label": "贡献", "value": 3 }, { "name": "团队", "label": "热度", "value": 1 }, { "name": "部门", "label": "引用", "value": 4 }, { "name": "部门", "label": "口碑", "value": 1 }, { "name": "部门", "label": "产量", "value": 6 }, { "name": "部门", "label": "贡献", "value": 5 }, { "name": "部门", "label": "热度", "value": 7 }] };

    return (
      <GridContent>
        {/* <Row gutter={24} style={{ marginBottom: 3 }}>
          <Col sm={24} xs={24} md={24}>
            <Card size="small"  >
              <DeviceIndexCard mdNum='6'></DeviceIndexCard>
            </Card>
          </Col>
        </Row> */}

        <Row gutter={24} style={{ marginBottom: 16 }} align="bottom" >
          <Col sm={24} xs={24} md={16}>
            <Card size="small" title="实时数据" style={{ marginBottom: 24}} >
              <Row gutter={24} style={{ margin: '0' }}>
                <Col sm={24} xs={24} md={24} style={{ padding: '0' }}>
                  <Card size="small" title={<Link to='/iiot_monitor/system'>三联供机系统</Link>} >
                    <Card.Grid style={{ width: '150px', padding: '6px' }}>
                      <List size="small" >
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>系统效率</small> {numeral(2000).format('0,0')} <small>%</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}> <Icon type="setting" /> <small>发电功率</small> {numeral(3000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>制冷量</small> {numeral(2000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                      </List>

                    </Card.Grid>

                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="烟气机" deviceSrc={yanqiji}></DeviceCard></Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="发电机" deviceSrc={fadianji}></DeviceCard></Card.Grid>
                  </Card>
                </Col>
                <Col sm={24} xs={24} md={24} style={{ padding: '0' }}>
                  <Card size="small" title={<Link to='/iiot_monitor/system'>直燃机系统</Link>} >
                  <Card.Grid style={{ width: '150px', padding: '6px' }}>
                      <List size="small" >
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>系统效率</small> {numeral(2000).format('0,0')} <small>%</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>耗气量</small> {numeral(3000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}> <Icon type="setting" /> <small>制冷量</small> {numeral(2000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                      </List>

                    </Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="1#直燃机" deviceSrc={zhiranji} ></DeviceCard></Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="2#直燃机" deviceSrc={zhiranji}></DeviceCard></Card.Grid>
                  </Card>
                </Col>
                <Col sm={24} xs={24} md={24} style={{ padding: '0' }}>
                  <Card size="small" title={<Link to='/iiot_monitor/system'>空气源热泵</Link>} >
                  <Card.Grid style={{ width: '150px', padding: '6px' }}>
                      <List size="small" >
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}> <Icon type="setting" /> <small>系统效率</small> {numeral(2000).format('0,0')} <small>%</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>用电功率</small> {numeral(3000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>制冷量</small> {numeral(2000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                      </List>

                    </Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="1#" deviceSrc={kongqiyuanreb} ></DeviceCard></Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="2#" deviceSrc={kongqiyuanreb}></DeviceCard></Card.Grid>
                  </Card>
                </Col>
                <Col sm={24} xs={24} md={24} style={{ padding: '0' }}>
                  <Card size="small" title={<Link to='/iiot_monitor/system'>水泵及冷却塔</Link>} >
                  <Card.Grid style={{ width: '150px', padding: '6px' }}>
                      <List size="small" >
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}><Icon type="setting" />  <small>系统效率</small> {numeral(2000).format('0,0')} <small>%</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}> <Icon type="setting" /> <small>用电功率</small> {numeral(3000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                        <List.Item>
                          <span style={{ fontSize: '14px', fontWeight: '600' }}> <Icon type="setting" /> <small>循环水量</small> {numeral(2000).format('0,0')} <small>kW</small> </span>

                        </List.Item>
                      </List>

                    </Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCardBeng deviceName="冷冻水泵" deviceSrc={shuibeng} ></DeviceCardBeng></Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCardBeng deviceName="冷却水泵" deviceSrc={shuibeng}></DeviceCardBeng></Card.Grid>
                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCardTa deviceName="冷却塔" deviceSrc={lenqueta}></DeviceCardTa></Card.Grid>
                  </Card>
                </Col>
              </Row>
            </Card>

            <Card size="small" title="时序数据" style={{ marginBottom: 24, height: 280 }}>
                                    <EchartCurveRT id="trrr11111" />
                                </Card>
          </Col>


          <Col sm={24} xs={24} md={8}>

          <DeciceMiniChart></DeciceMiniChart>
            <Card size="small" title="故障信息" style={{ marginBottom: 0 }}
              actions={[<span><Icon type="setting" /> 10</span>, <span> <Icon type="edit" /> 10</span>, <span> <Icon type="ellipsis" />10</span>]}
            >
            </Card>

            <Card size="small" title="工单信息" style={{ marginBottom: 0 }}
              actions={[<span><Icon type="setting" /> 10</span>, <span> <Icon type="edit" /> 10</span>, <span> <Icon type="ellipsis" />10</span>]}
            >
            </Card>
            <Card size="small" title="运行建议" style={{ marginBottom: 24 }}

            >
            </Card>
          
            <Card size="small" title="负荷预测" style={{ marginBottom: 24,height:'280px' }}>
              <ForeCast id="ForeCast_1907111146"></ForeCast>
            </Card>
          </Col>

        </Row>



      </GridContent>
    );
  }
}

export default ProjectMonitor;